<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 实现瀑布流布局（display: flex）</title>
</head>
<style>
.g-container {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  -webkit-box-pack: justify;
          justify-content: space-between;
  overflow: hidden;
}

.g-queue {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  flex-basis: 24%;
}

.g-item {
  position: relative;
  width: 100%;
  margin: 2.5% 0;
}

.g-queue:nth-child(1) .g-item:nth-child(1) {
  height: 247px;
  background: #5a78a2;
}
.g-queue:nth-child(1) .g-item:nth-child(1)::after {
  content: "1";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(2) {
  height: 305px;
  background: #694271;
}
.g-queue:nth-child(1) .g-item:nth-child(2)::after {
  content: "2";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(3) {
  height: 180px;
  background: #923289;
}
.g-queue:nth-child(1) .g-item:nth-child(3)::after {
  content: "3";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(4) {
  height: 350px;
  background: #e42fa4;
}
.g-queue:nth-child(1) .g-item:nth-child(4)::after {
  content: "4";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(5) {
  height: 64px;
  background: #e719eb;
}
.g-queue:nth-child(1) .g-item:nth-child(5)::after {
  content: "5";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(6) {
  height: 160px;
  background: #68e35c;
}
.g-queue:nth-child(1) .g-item:nth-child(6)::after {
  content: "6";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(7) {
  height: 322px;
  background: #ad1428;
}
.g-queue:nth-child(1) .g-item:nth-child(7)::after {
  content: "7";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(8) {
  height: 219px;
  background: #46a371;
}
.g-queue:nth-child(1) .g-item:nth-child(8)::after {
  content: "8";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.g-queue:nth-child(2) .g-item:nth-child(1) {
  height: 269px;
  background: #9b23d2;
}
.g-queue:nth-child(2) .g-item:nth-child(1)::after {
  content: "1";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(2) .g-item:nth-child(2) {
  height: 99px;
  background: #0bbe0f;
}
.g-queue:nth-child(2) .g-item:nth-child(2)::after {
  content: "2";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(2) .g-item:nth-child(3) {
  height: 296px;
  background: #394487;
}
.g-queue:nth-child(2) .g-item:nth-child(3)::after {
  content: "3";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(2) .g-item:nth-child(4) {
  height: 305px;
  background: #49d312;
}
.g-queue:nth-child(2) .g-item:nth-child(4)::after {
  content: "4";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(2) .g-item:nth-child(5) {
  height: 250px;
  background: #33e252;
}
.g-queue:nth-child(2) .g-item:nth-child(5)::after {
  content: "5";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(2) .g-item:nth-child(6) {
  height: 174px;
  background: #bb3125;
}
.g-queue:nth-child(2) .g-item:nth-child(6)::after {
  content: "6";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(2) .g-item:nth-child(7) {
  height: 183px;
  background: #6a01cf;
}
.g-queue:nth-child(2) .g-item:nth-child(7)::after {
  content: "7";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(2) .g-item:nth-child(8) {
  height: 82px;
  background: #6e2fec;
}
.g-queue:nth-child(2) .g-item:nth-child(8)::after {
  content: "8";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.g-queue:nth-child(3) .g-item:nth-child(1) {
  height: 125px;
  background: #ec7436;
}
.g-queue:nth-child(3) .g-item:nth-child(1)::after {
  content: "1";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(3) .g-item:nth-child(2) {
  height: 120px;
  background: #c6f218;
}
.g-queue:nth-child(3) .g-item:nth-child(2)::after {
  content: "2";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(3) .g-item:nth-child(3) {
  height: 190px;
  background: #a162c1;
}
.g-queue:nth-child(3) .g-item:nth-child(3)::after {
  content: "3";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(3) .g-item:nth-child(4) {
  height: 216px;
  background: #b4d0a7;
}
.g-queue:nth-child(3) .g-item:nth-child(4)::after {
  content: "4";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(3) .g-item:nth-child(5) {
  height: 180px;
  background: #c56dad;
}
.g-queue:nth-child(3) .g-item:nth-child(5)::after {
  content: "5";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(3) .g-item:nth-child(6) {
  height: 349px;
  background: #aa692d;
}
.g-queue:nth-child(3) .g-item:nth-child(6)::after {
  content: "6";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(3) .g-item:nth-child(7) {
  height: 322px;
  background: #8cfec1;
}
.g-queue:nth-child(3) .g-item:nth-child(7)::after {
  content: "7";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(3) .g-item:nth-child(8) {
  height: 152px;
  background: #6eac89;
}
.g-queue:nth-child(3) .g-item:nth-child(8)::after {
  content: "8";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.g-queue:nth-child(4) .g-item:nth-child(1) {
  height: 341px;
  background: #01ee37;
}
.g-queue:nth-child(4) .g-item:nth-child(1)::after {
  content: "1";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(4) .g-item:nth-child(2) {
  height: 127px;
  background: #afb4d2;
}
.g-queue:nth-child(4) .g-item:nth-child(2)::after {
  content: "2";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(4) .g-item:nth-child(3) {
  height: 221px;
  background: #35d042;
}
.g-queue:nth-child(4) .g-item:nth-child(3)::after {
  content: "3";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(4) .g-item:nth-child(4) {
  height: 257px;
  background: #a2a7f1;
}
.g-queue:nth-child(4) .g-item:nth-child(4)::after {
  content: "4";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(4) .g-item:nth-child(5) {
  height: 276px;
  background: #2ffa2b;
}
.g-queue:nth-child(4) .g-item:nth-child(5)::after {
  content: "5";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(4) .g-item:nth-child(6) {
  height: 200px;
  background: #7fb5e2;
}
.g-queue:nth-child(4) .g-item:nth-child(6)::after {
  content: "6";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(4) .g-item:nth-child(7) {
  height: 223px;
  background: #764039;
}
.g-queue:nth-child(4) .g-item:nth-child(7)::after {
  content: "7";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(4) .g-item:nth-child(8) {
  height: 74px;
  background: #a3813a;
}
.g-queue:nth-child(4) .g-item:nth-child(8)::after {
  content: "8";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

</style>
<body>
  <!-- 本例使用 CSS flex 实现瀑布流布局 -->
<!-- 关键点，横向flex布局嵌套多列纵向flex布局，使用了 vw 进行自适应缩放 -->
<div class="g-container">
  <div class="g-queue">
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
  </div>
  <div class="g-queue">
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
  </div>
  <div class="g-queue">
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
  </div>
  <div class="g-queue">
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
  </div>
</div>
</body>
</html>